<template>
  <div>
    <div class="w">
      <div class="curriculum">
        <a href="#"> 我的课程 </a>
      </div>

      <div class="join">
        <van-swipe
          class="my-swipe"
          :show-indicators="false"
          :width="100"
          :height="115"
          :loop="false"
        >
          <ul>
            <van-swipe-item>
              <li class="first">
                <a href="#">
                  <span>高分课·免费看</span>
                  <p>加入会员<span class="iconfont icon-jiantouyou"></span></p>
                </a>
              </li>
            </van-swipe-item>
            <van-swipe-item v-for="(item,index) in joinLists" :key="index">
              <li>
                <img :src="item.joinImg" alt="" height="115px" />
                <p>{{item.joinName}}</p>
              </li>
            </van-swipe-item>
          </ul>
        </van-swipe>
      </div>

      <div class="vip">
        <div class="vip-hd">
          <h2>会员免费 新人仅5元</h2>
          <span>加入会员</span>
        </div>
        <div class="vip-bd">
          <van-swipe :loop="false" :width="165" :height="300" :show-indicators="false">
            <ul>
              <van-swipe-item v-for="(item,index) in vipLists" :key="index">
                <li>
                  <div class="img">
                    <img :src="item.vipImg" height="100%" alt="" />
                    <span>{{item.vipNum}}人参与</span>
                  </div>
                  <div class="jieshao">
                    <div class="touxiang">
                      <img :src="item.vipTouxiang" alt="" />
                      <span>{{item.vipName}}</span>
                    </div>
                    <p>{{item.vipFood}}</p>
                    <p>综合评分 {{item.vipFen}}</p>
                  </div>
                </li>
              </van-swipe-item>
            </ul>
          </van-swipe>
        </div>
      </div>

      <div class="advanced">
        <div class="advanced-hd">
          <h2>进阶必看</h2>
          <span>查看更多</span>
        </div>
        <div class="advanced-bd">
          <ul>
            <li v-for="(item,index) in vipLists" :key="index">
              <div class="img">
                <img :src="item.vipImg" height="100%" alt="" />
                <span>{{item.vipNum}}人参与</span>
              </div>
              <div class="jieshao">
                <div class="touxiang">
                  <img :src="item.vipTouxiang" alt="" />
                  <span>{{item.vipName}}</span>
                </div>
                <p>{{item.vipFood}}</p>
                <p>综合评分 {{item.vipFen}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="baikuai"></div>
    </div>
  </div>
</template>

<script>
import {classData} from "../api/classRoom"
export default {
  data() {
    return {
      joinLists: null,
      vipLists:null
    };
  },
  created(){
    classData().then(data=>{
      this.joinLists=data.joinList
      this.vipLists=data.vipList
    })
  }
};
</script>

<style>
@import "../assets/css/classroom.css";

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
</style>